<template>
  <PageWrapper title="打印示例">
    <CollapseContainer title="json打印表格">
      <a-button type="primary" @click="jsonPrint">打印</a-button>
    </CollapseContainer>

    <a-button type="primary" class="mt-5" @click="imagePrint"
      >Image Print</a-button
    >
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from "@/components/Page";
import { CollapseContainer } from "@/components/Container";

import printJS from "print-js";

defineOptions({ name: "AppLogo" });

function jsonPrint() {
  printJS({
    printable: [
      { name: "ll", email: "123@gmail.com", phone: "123" },
      { name: "qq", email: "456@gmail.com", phone: "456" },
    ],
    properties: ["name", "email", "phone"],
    type: "json",
  });
}

function imagePrint() {
  printJS({
    printable: [
      "https://anncwb.github.io/anncwb/images/preview1.png",
      "https://anncwb.github.io/anncwb/images/preview2.png",
    ],
    type: "image",
    header: "Multiple Images",
    imageStyle: "width:100%;",
  });
}
</script>
